<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <!-- 什么是DOM（文档对象模型）
    可以把一个网页想象成是一棵倒立的树。DOM 就是对这棵 “树” 的一种描述方式。这棵树的每个部分（比如网页里的标题、段落、图片等元素）都是一个 “节点”。
    在这个网页里，html标签是树根，head和body是树枝，title、h1、p这些标签以及它们包含的文字就是树叶。DOM 就像是一张地图，清楚地标明了这些部分之间的关系，让程序知道怎么找到每个部分。

    DOM有什么作用 
    1.改变网页内容
    2.动态添加或删除元素
    3.改变网页外观
    -->


    <!-- 准备标签 -->
     <div class="box">前端课程真好玩</div>
     <div class="box">任老师上课真好</div>
     <div class="box">章若楠真漂亮</div>
     <div id="box">张起灵真帅</div>
     <p class="box">这是段落标签</p>
     <p class="box">
        <span>这是段落里面的span标签</span>
     </p>
</body>
<script>
    //querySelector('标签名')；获取的是该标签名的第一个元素
    const em1=document.querySelector('div'); //标签选择器
    console.log(em1);
    const em2=document.querySelector('.box'); //类选择器
    console.log(em2);
    const em3=document.querySelector('#box'); //id选择器
    console.log(em3);
    const em4=document.querySelector('.box span li:nth-child(1)'); //复合选择器
    console.log(em4);
    console.log('-------------------------');
    const elm1=document.querySelectorAll('div'); //标签选择器
    console.log(elm1); //伪数组
    //遍历数组
    for (let i = 0; i < elm1.length; i++) {
        console.log(elm1[i]);
    }
    elm1[3].style.color='red'; //更改第三个的颜色
</script>
</html>